<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Registration</title>
        <style type="text/css">            
            #logo{
                position: absolute;
                margin-top: -26px;
            }
            #topContent{
                font-family:Lucida Sans Unicode;
                font-size: 300%;
                margin-top: 30px;
                margin-left: auto;
                margin-right: auto;
            }
            #registration{
                margin-top: 0;
                margin-bottom: 0;
                text-align: center;
            }
            #registrationform{
                margin-left: 30%;
                margin-right: 30%;
                margin-top: 25px;
                text-align: center;
            }
            #submit{
                margin-left: auto;
                margin-right: auto;
            }
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" resizable="true" size="150">
                <div id="logo">
                    <p>
                        <h:link outcome="login">
                            <h:graphicImage  value="/images/meteocal2.png" width="30px" height="30px"/>
                            <h style="margin-top: -26px; margin-left:33px ;position: absolute">MeteoCal</h>
                        </h:link>
                    </p>
                </div>
                <div id="topContent">
                    <p id="registration">
                        Registration
                    </p>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true" size="1000">
                <h:form id="registrationform">
                    <p:panel header="Registration Form">
                        <h:panelGrid columns="3" id="regGrid">
                            <h:outputLabel for="name">Name:</h:outputLabel>
                            <p:inputText id="name" value="#{registrationBean.user.name}">
                                <p:ajax update="namemsg"/>
                            </p:inputText>
                            <p:message id="namemsg" for="name" />
                            
                            <h:outputLabel for="email">Email:</h:outputLabel>
                            <p:inputText id="email" value="#{registrationBean.user.email}">
                                <p:ajax update="emailmsg"/>
                            </p:inputText>
                            <p:message id="emailmsg" for="email" />
                            
                            <h:outputLabel for="password">Password:</h:outputLabel>
                            <p:password id="password" value="#{registrationBean.user.password}"
                                        feedback="true" match="pwd2" label="Password"/>
                            <p:message for="password" />
                            
                            <h:outputLabel for="pwd2">Confirm Password:</h:outputLabel>
                            <p:password id="pwd2" label="Confirm Password"/>
                            <br /><h:messages  style="color: red; text-align: left"/>
                        </h:panelGrid>
                        <p:commandButton id="submit" value="Register" update="regGrid" action="#{registrationBean.register()}" ajax="true"/>
                    </p:panel>
                </h:form>
            </p:layoutUnit>    
        </p:layout>
    </h:body>
</html>

